<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <el-input v-model="next_course_id" placeholder="请输入课程ID"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="linkToOtherNode">add next skill</el-button>
            </el-form-item>
        </el-form>
        <ul>
            <li v-for="item in list">{{item.title}} <a @click="detach(item)">[delete]</a></li>
        </ul>
    </div>

</template>

<script>
    export default {
        props: {skillId: {type: Number, required: true}, courseId: {type: Number, required: true}},
        data() {
            return {
                list: [],
                next_course_id: null,
            }
        }, methods: {
            getRelation() {
                axios.get('skills/' + this.skillId + '/courses/' + this.courseId + '/relation').then((response) => {
                    this.list = response.data.data;
                })
            }, detach(item) {
                let req;
                if (item.pivot.next_course_id.indexOf(this.courseId)) {
                    //before node
                    req = axios.delete('skills/' + this.skillId + '/courses/' + this.courseId + '/next-skill', {params: {next_course_id: item.id}})
                } else {
                    //after
                    req = axios.delete('skills/' + this.skillId + '/courses/' + this.courseId + '/next-skill', {params: {next_course_id: this.courseId}})
                }
                req.then(res => {
                    this.getRelation();
                });
                this.$emit('detach', item);
            }, linkToOtherNode() {
                console.log(this.next_course_id);
                axios.post('skills/' + this.skillId + '/courses/' + this.courseId + '/next-skill',  {next_course_id: this.next_course_id}).then(res => {
                    this.getRelation();
                    this.$emit('complete');
                });

            }
        }, watch: {
            courseId() {
                this.getRelation();
            }
        }, created() {
            this.getRelation();
        }
    }
</script>

<style scoped>

</style>